<!DOCTYPE html>
<html>
<head>
    <block name="include">
        <include file="Public:header"/>
    </block>
    <style>
        body {
            overflow-y: scroll;
        }
    </style>
</head>
<body class="gray-bg">

<div class="wrapper wrapper-content animated fadeInRight">
    <div class="ibox float-e-margins">
        <div class="ibox-content">

            <div class="layui-tab">

                <ul class="layui-tab-title">
                    <li
                    <if condition="$tab eq 1">class="layui-this"</if>
                    >所有文件</li>
                    <li
                    <if condition="$tab eq 2">class="layui-this"</if>
                    >分类管理</li>
                </ul>
                <div class="layui-tab-content ibox-content">
                    <!--所有文件 START-->
                    <div class="layui-tab-item <if condition='$tab eq 1'>layui-show</if>">
                        <div>
                            <form class="layui-form">
                                <div class="layui-form-item layui-inline">
                                    <input type="text" placeholder="排序" class="layui-input" name="fileorder">
                                </div>
                                <div class="layui-form-item layui-inline">
                                    <input type="text" placeholder="文件名" required lay-verify="required"
                                           class="layui-input" name="filename">
                                    <input type="hidden" value="" name="path" id="path">
                                </div>
                                <div class="layui-form-item layui-inline">
                                    <select name="cat_id" lay-filter="slt">
                                        <volist name="cat" id="vo">
                                            <option value="{$vo.id}">{$vo.name}</option>
                                        </volist>
                                    </select>
                                </div>
                                <div class="layui-form-item layui-inline">
                                    <button type="button" class="layui-btn" id="upload">上传文件</button>
                                    <button type="button" class="layui-btn" lay-submit lay-filter="fileAdd">
                                        提交
                                    </button>
                                </div>
                            </form>
                        </div>
                        <div>
                            <table class="layui-hide" lay-size="sm" id="file-table" lay-filter="file-table"></table>
                            <script type="text/html" id="filebar">
                                <a class="layui-btn layui-btn-xs" lay-event="editFile">修改</a>
                                <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delFile">删除</a>
                            </script>
                        </div>
                    </div>
                    <!--所有文件 END-->
                    <!--分类管理 START-->
                    <div class="layui-tab-item <if condition='$tab eq 2'>layui-show</if>">
                        <div class="layui-inline">
                            <input type="text" name="name" placeholder="分类名" class="layui-input" id="cat_name">
                        </div>
                        <div class="layui-inline">
                            <input type="text" name="order" placeholder="排序" class="layui-input" id="order">
                        </div>
                        <div class="layui-inline">
                            <button class="layui-btn layui-btn-sm" id="cat-add-btn">
                                新增&nbsp;<i class="layui-icon">&#xe654;</i>
                            </button>
                        </div>
                        <div>
                            <table class="layui-hide" id="cat-table" lay-size="sm" lay-filter="cat-table"></table>
                            <script type="text/html" id="bar">
                                <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>

                            </script>
                        </div>
                    </div>
                    <!--分类管理 END-->
                </div>
            </div>
        </div>
    </div>
</div>
<block name="include">
    <include file="Public:footer"/>
</block>
<script>

    layui.use('form', function () {
        var form = layui.form;
        form.on('submit(fileAdd)', function (data) {
            console.log(data.field);
            layui.use(['jquery', 'layer'], function () {
                var $ = layui.$
                    , layer = layui.layer;
                $.ajax({
                    url: '{:U("Download/uploadSubmit")}',
                    data: data.field,
                    dataType: 'json',
                    type: 'post',
                    success: function (data) {
                        if (data.status == 1) {
                            layer.confirm('新增成功', {
                                icon: 1,
                                btn: ['确定']
                            }, function () {
                                location.href = '{:U("Download/index")}?tab=1'
                            });
                        } else {
                            layer.confirm('新增失败', {
                                icon: 1,
                                btn: ['确定']
                            })
                        }
                    }
                });
            });
            return false;
        });
    });

    layui.use('table', function () {
        var table = layui.table;
        table.render({
            elem: '#file-table'
            , url: '{:U("Download/fileDataGet")}'
            , cols: [[
                {field: 'order', title: '排序',sort: true},
                {field: 'name', title: '文件名'},
                {field: 'cat_name', title: '分类',sort: true},
                {fixed: 'right', align: 'center', toolbar: '#filebar'}
            ]]
            , page: {
                layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'],//自定义分页布局
                limits: [10, 20, 30],
                limit: 10
            }
        });
        table.render({
            elem: '#cat-table'
            , url: '{:U("Download/dataGet")}'
            , cols: [[
                {field: 'name', title: '分类', edit: 'text'},
                {field: 'order', title: '排序', edit: 'text',sort: true},
                {fixed: 'right', align: 'center', toolbar: '#bar'}
            ]]
            , page: {
                layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'],//自定义分页布局
                limits: [10, 20, 30],
                limit: 10
            }
            , id: 'reload'
        });
        var $ = layui.$, active = {
            reload: function () {
                var search = $('#search');
                //执行重载
                table.reload('reload', {
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                    , where: {
                        search: search.val()
                    }
                });
            }
        };
        //监听单元格编辑
        table.on('edit(cat-table)', function (obj) {
            var value = obj.value //得到修改后的值
                , data = obj.data //得到所在行所有键值
                , field = obj.field; //得到字段
            $.ajax({
                url: "{:U('Download/editCat')}",
                data: {id: data.id, field: field, value: value},
                dataType: 'json',
                type: 'post',
                success: function (data) {
                    if (data.status == 1) {
                        console.log('success');
                    }
                }
            })
        });

        $('#search-btn').on('click', function () {
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });

        table.on('tool(cat-table)', function (obj) {
            var data = obj.data;
            if (obj.event === 'del') {
                layer.confirm('真的删除行么', function (index) {
                    layui.use(['jquery', 'layer'], function () {
                        var $ = layui.$
                            , layer = layui.layer;
                        $.ajax({
                            url: "{:U('Download/delCat')}",
                            data: {id: data.id},
                            dataType: 'json',
                            type: 'post',
                            success: function (data) {
                                if (data.status == 1) {
                                    obj.del();
                                    layer.close(index);
                                }
                            }
                        })
                    })

                });
            }

        });
        table.on('tool(file-table)', function (obj) {
            var data = obj.data;
            if (obj.event === 'delFile') {
                layer.confirm('真的删除行么', function (index) {
                    layui.use(['jquery', 'layer'], function () {
                        var $ = layui.$
                            , layer = layui.layer;
                        $.ajax({
                            url: "{:U('Download/delFile')}",
                            data: {id: data.id},
                            dataType: 'json',
                            type: 'post',
                            success: function (data) {
                                if (data.status == 1) {
                                    obj.del();
                                    layer.close(index);
                                }
                            }
                        })
                    })

                });
            }
            if (obj.event === 'editFile') {
                layer.open({
                    type: 2,
                    title: '修改文件信息',
                    area: ['500px', '400px'],
                    maxmin: true,
                    content: ["{:U('Download/editFile')}" + '?id=' + data.id]
                });
            }
        });

    });
    //    新增分类
    layui.use(['jquery', 'layer'], function () {
        var $ = layui.$
            , layer = layui.layer;
        $('#cat-add-btn').click(function () {
            var name = $('#cat_name').val();
            var order = $('#order').val();
            if (name != '' && name != null) {
                $.ajax({
                    url: '{:U("Download/catAdd")}',
                    data: {name: name, order: order},
                    dataType: 'json',
                    type: 'post',
                    success: function (data) {
                        if (data.status == 1) {
                            layer.confirm('添加成功', {
                                icon: 1,
                                btn: ['确定']
                            }, function () {
                                $('#cat_name').val('');
                                $('#order').val('');
                                location.href = '{:U("Download/index")}?tab=2';
                            });
                        } else {
                            layer.confirm('添加失败', {
                                icon: 1,
                                btn: ['确定']
                            })
                        }
                    }
                })
            }
        });
    });

    layui.use('upload', function () {
        var $ = layui.jquery
            , upload = layui.upload;
        upload.render({ //允许上传的文件后缀
            elem: '#upload'
            , url: '{:U("Download/fileUpload")}'
            , accept: 'file' //普通文件
            , exts: 'doc|xls|xlsx|docx|ppt|pptx' //只允许上传压缩文件
            , done: function (res) {
//                console.log(res);
                $('#path').val(res.info);
                $('#upload').html('重新上传');
            }
        });
    });
</script>
</body>
</html>
